<template>
	<view class="page-share">
		<!-- 导航栏 开始 -->
		<view class="page-tab">
			<tab-nav :tab-cur="TabCur" :tab-list="tabList" :is-show-menu="false" @tabSelect="tabSelect" :cus-padding="32" />
		</view>
		<!-- 导航栏 结束 -->

		<!-- 内容 开始 -->
		<scroll-view scroll-y="true" style="height: calc(100% - 90rpx)" @scrolltolower="scrolltolower">
			<!-- 视频 开始 -->
			<view class="cu-card article custom-card-video" v-if="TabCur===0">
				<block v-for="(item,index) of list" :key="item.id">
					<view class="cu-item shadow padding-top custom-margin">
						<view class="content">
							<view class="img-box margin-right flex align-end">
								<view class="img-box-bg">
									<image :src="item.video.img" style="width:100%;height:100%" mode="aspectFit" />
								</view>
								<view class="bg-shadeBottom custom padding-xs padding-top-xl flex justify-between align-center text-xs">
									<view>{{item.video.view_num}}</view>
									<view>{{item.create_time_man}}</view>
								</view>
							</view>
							<view class="desc">
								<view class="text-content hidden2">{{item.video.title}}</view>
								<view class="flex align-center">
									<image class="cu-avatar custom-video-avatar sm round margin-right-xs" :src="item.avatar" />
									<view class="text-sm">{{item.nickname}}</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<!-- 视频 结束 -->
			<!-- 直播 开始 -->
			<view class="cu-card custom-card-live grid col-2 padding-lr-xs" v-if="TabCur===1">
				<block v-for="(item,index) of list" :key="item.id">
					<view class="content-list padding-lr-xs padding-bottom-sm">
						<view class="content-item bg-white">
							<view class="img-box-bg">
								<image :src="item.live.img" mode="aspectFill" style="height:100%" />
							</view>
							<view class="bg-shadeTop custom padding-lr-sm padding-top padding-bottom-xl flex text-xs">
								<view class="flex align-end">
									<view class="margin-right-xs"></view>
									<!-- <view>直播中</view> -->
								</view>
								<!-- <view class="margin-left-xs">{{item.live.like_num}}人观看</view> -->
							</view>
							<view class="bg-shadeBottom custom padding-lr-sm padding-bottom padding-top-xl flex flex-direction justify-between">
								<view class="text-sm text-cut" style="min-width: 0;">{{item.live.title}}</view>
								<view class="flex justify-between align-center margin-top-sm text-xs">
									<view class="flex justify-start align-center">
										<image class="cu-avatar custom round margin-right-xs" :src="item.avatar"></image>
										<view>{{item.nickname}}</view>
									</view>
									<view class="flex justify-start align-center">
										<!-- <view class="margin-left-xs">{{item.live.like_num}}</view> -->
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<!-- 直播 结束 -->
		</scroll-view>
		<!-- 内容 结束 -->
	</view>
</template>

<script>
	import tabNav from '@/components/TabNav'
	export default {
		data() {
			return {
				TabCur: 0,
				list: [],
				videoData: {
					total: 0
				},
				liveData: {
					total: 0
				},
				query: {
					page: 1,
					size: 10,
					type: ""
				},
				isMore:false
			};
		},
		computed: {
			tabList() {
				return [`视频${this.videoData.total}`, `直播${this.liveData.total}`]
			}
		},
		components: {
			tabNav
		},
		methods: {
			tabSelect(index) {
				this.TabCur = index
				this.query.page=1
				switch (index) {
					case 0:
						this.list = this.videoData.data;
						break;
					case 1:
						this.list = this.liveData.data;
						break;
					default:
						0;
				}
			},
			async getList(type) {
				this.query.type = type
				let query=this.$h.utils.deepClone(this.query)
				let {
					data
				} = await this.waitingLoading(this.$h.api.userModel.getMyShares)(query)
				this.isMore=data.data.length===query.size
				return data
			},
			async scrolltolower() {
				if(this.isMore){
					this.query.page++
					let data=await this.getList(this.TabCur)
					this.list=[...this.list,...data.data]
				}
			}
		},
		onLoad() {
			Promise.all([this.getList(0), this.getList(1)]).then(res => {
				this.videoData = res[0]
				this.liveData = res[1]
				this.list = this.videoData.data
			})
		}
	}
</script>
<style>
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.page-share {
		height: 100%;

		.cu-card {
			padding-top: 20rpx;

			.cu-item.custom-margin {
				margin: 20rpx;
				overflow: hidden;
			}
		}

		.cu-card.custom-card-video {
			.img-box {
				width: 200rpx;
				height: 160rpx;
				position: relative;
			}

			.text-content {
				height: initial;
				font-size: 26rpx;
				color: #343436;
				font-weight: 500;
			}

			.cu-avatar.custom-video-avatar {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.content-list {
			height: 520rpx;

			.content-item {
				width: 100%;
				height: 100%;
				border-radius: 14rpx;
				overflow: hidden;
				position: relative;

				.cu-avatar.custom {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.cu-card.custom-card-short,
		.cu-card.custom-card-live {
			padding-top: 40rpx;
		}
	}
</style>
